# Collapsible
$collapsedState = $this->getRequest()->getCookie( 'changeslist-state' );
$collapsedClass = $collapsedState === 'collapsed' ? ' mw-collapsed' : '';
+ # Enhanced mode
+ $enhancedMode = $this->getRequest()->getBool( 'enhanced', $user->getOption( 'usenewrc' ) );
+ $enhancedClass = $enhancedMode ? ' mw-enhanced' : '';
+
+ $legendClasses = $collapsedClass . $enhancedClass;
$legend =
- '<div class="mw-changeslist-legend mw-collapsible' . $collapsedClass . '">' .
+ '<div class="mw-changeslist-legend mw-collapsible' . $legendClasses . '">' .
$legendHeading .
'<div class="mw-collapsible-content">' . $legend . '</div>' .
'</div>';
}
}
+ &-enhancedView {
+ .mw-changeslist-legend {
+ z-index: 1;
+
+ &:not( .mw-collapsed ) {
+ .box-shadow( 0 1px 1px rgba( 0, 0, 0, 0.15 ) );
+ }
+ }
+ }
+
.mw-changeslist-legend {
background-color: @background-color-base;
+ border: 1px solid @colorGray12;
}
// Correction for Enhanced RC
// Regular RC
$content.find( 'ul.special li' )
.prepend( $highlights.clone() );
+
+ $content.removeClass( 'mw-rcfilters-ui-changesListWrapperWidget-enhancedView' );
}
};
.mw-changeslist-legend.mw-collapsed .mw-collapsible-content {
display: none;
}
+
+/* Prevent pushing down of content if legend is initially collapsed */
+.mw-changeslist-legend.mw-collapsed ~ ul.special > li:first-child {
+ clear: right;
+}
+
+/* Absolute positioning to avoid table overlap with floating elements */
+.mw-changeslist-legend.mw-enhanced {
+ background-color: #fff;
+ position: absolute;
+ right: 0;
+ margin-top: -0.5em;
+}